<template>
    <div id="coming">
        <ul>
            <li v-for="item in comingPlayData" :key="item.id"  class="d-flex">
                <div class="img">
                    <img :src="item.img" alt="">
                </div>
                <div class="txt">
                    <h3>{{item.title}}</h3>
                    <p>{{item.nums}}人想看</p>
                    <p>{{item.actors}}</p>
                    <p>未来30天上映</p>
                </div>
                <div class="btn">
                    <button>预售</button>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'Coming',
    methods: {
        getComingPlayData() {
            var that=this
            // axios.get('/mock/comingPlayData.json')
            axios.get('http://localhost/api/comingPlayData.json')
                .then(function (response) {
                    console.log(response);
                    if(response.status==200){
                        if(response.data && response.data.comingPlayData){
                            that.comingPlayData=response.data.comingPlayData
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    created(){
        this.getComingPlayData()
    },
    data(){
        return{
            comingPlayData:[]
        }
    }
}
</script>
<style scoped>
.d-flex{
    display: flex;
    column-gap: 5px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.img img{
    width: 80px;
}
.txt{
    width: 50%;
}
.txt p{
    font-size: 16px;
    margin: 3px 0;
    color: #666;
}
.txt p:nth-of-type(2){
    width: 100%;
    font-size: 16px;
    height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn{
    align-self: center;
    margin-left: 15px;
}
.btn button{
    width: 45px;
    height: 30px;
    border: none;
    color: #fff;
    border-radius: 5px;
    background-color: #47a1dd;
    margin-left: 10px;
}
</style>